/**
 * 积分商城-我的积分
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
import Header from '../../Common/Header'
// import LoadingBox from '../../Common/LoadingBox'
import {
    HttpService,
    dateFormat,
    Tips,
    pullDownRefresh,
    sxtUrl,
    jxtUrl
} from '../../../Tools'

// import comment from '../../Img/mall/task/comment.png'
// import phone from '../..//Img/mall/task/tel.png'
// import task from '../Img/mall/task/task.png'
// import photo from '../Img/mall/task/photo.png'
// import login from '../Img/mall/task/login.png'

export default class IntegralMyself extends Component {
    constructor(props) {
        super(props);

        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 60;
        this.state = {
            remainRyz: 0,
            currentRyz: 0,
            dataList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,
            integral: 0
        }

    }

    componentWillMount() {
        // this.getIntegral();
    }

    componentWillUnmount() {
        window.onscroll = null
    }

    componentDidMount() {
        this.getData()
        //加载更多
        window.onscroll = () => {
            const {
                dataEnd,
                dataNull,
                page
            } = this.state;
            if (this.dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                // debugger
                this.page++;
                this.getData();
            }
        }
        const obj = document.getElementById('refreshbox')
        const contentObj = document.getElementById('pdownrefresh')
        const statusObj = document.getElementById('status')
        let rct = this;
        pullDownRefresh(obj, contentObj, statusObj, 100, function(data) {
            if (data.status == 'end' && data.top >= 100 - 20) {
                this.page = 1;
                this.getData(1);
            }
        }.bind(this))
    }

    //查询积分
    // getIntegral() {
    //     HttpService.query({
    //         url: '/teacherapp/credit/getCurrentCredits',
    //         data: {
    //             token: sessionStorage.appToken,
    //             type: 0
    //         },
    //         success: (res => {
    //             if (res.code == 20014) {
    //                 this.setState({
    //                     remainRyz: res.data.overplusCredit,
    //                     currentRyz: res.data.currentCredit
    //                 })
    //                 return
    //             }
    //             Tips(res.data.msg)
    //         })
    //     })
    // }

    //获取数据列表
    getData(status) {
        this.dataLoad = 1
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        if (status == 1)
            this.page = 1
        HttpService.query({
            url: 'src/Component/businessCenter/mock/IntegralMyself.json',
            data: {
                token: sessionStorage.appToken,
                pageNumber: this.page,
                pageSize: this.pagesize
            },
            success: (res => {
                this.dataLoad = 0
                this.setState({
                    dataLoad: 0
                });

                //获取数据成功
                let dataList = res.data.result

                dataList = this.state.dataList.concat(res.data.result);
                this.setState({
                    dataList
                });
                if (res.data.totalPages == this.page) {
                    this.setState({
                        dataEnd: 1
                    });
                } else if (res.data.result.length < this.pagesize) {
                    this.setState({
                        dataEnd: 1
                    });
                    if (dataList.length == 0) {
                        this.setState({
                            dataEnd: 0,
                            dataNull: 1
                        });
                    }
                }
                return;


            })
        })
    }



    render() {
        const {
            dataList,
            remainRyz,
            currentRyz
        } = this.state;

        let dataLists = dataList.map(function(item) {
            const date = dateFormat(new Date(item.createTime), '-');
            const day = date.split(' ')[0].slice(5);
            const time = date.split(' ')[1];

            return (
                <li className="list">
                    <span className="time">
                        <span className="day">{day}</span>
                        <span className="hour">{time}</span>
                    </span>

                    <span className="tilte">{item.name}</span>
                    <span className="number">{item.num}</span>
                </li>
            )
        }.bind(this))
        return (
            <div className="punkte_page">
                <Header title='我的' />
                <input type="file" />
                <div id='refreshbox'>
                    <div id='status'><span></span></div>
                    <div id='pdownrefresh'>
                        <div className="punkte_header">
                            <span className="title">剩余</span>
                            <span className="number">{remainRyz}</span>
                            <span className="img"/>
                            <span className="annotation">可用于兑换商城商品</span>
                        </div>
                        <div className="get_punkte">
                            <div className="get_punkte_header">
                                <span className="line"/>
                                <span className="left_tilte">获得记录</span>
                                <span className="number">{currentRyz}</span>
                                <span className="right_tilte">本月&nbsp;</span>
                            </div>
                            <ul>
                                {dataLists}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
